<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img class="logo" src="@/assets/toutiao_logo.png" alt="">
        </template>
        <template #right >
          <!-- postcss只能翻译style里的css样式，标签内的px无法转换，需要手动计算 -->
          <van-icon
          name="search"
          size="0.48rem"
          color='#fff'
          @click="moveSearchPageFn"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab导航-->
    <!-- 重要！！！：：每个van-tab代表一个标签导航，中间夹着的内容就是它对应的下属的列表内容 -->
    <!-- van-tab循环了很多标签导航，与之一一对应的内容列表不是上来都创建的，默认穿件当前激活导航对应列表组件
    第一次切换到对应频道时，才会创建下属的ArticleList组件 -> created方法
    第二次切换就是显示/隐藏切换
     -->
    <div class="main">
      <van-tabs
      v-model="channelId"
      @change="changeChannelFn"
      animated
      sticky
      offset-top='1.226667rem'
      >
        <van-tab
        :title="obj.name"
        v-for="obj in userChannelList"
        :key="obj.id"
        :name="obj.id"
        >
          <ArticleList
          :channelId="channelId"
          ></ArticleList>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 编辑频道图标 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="clickPlusFn"/>
    <van-popup class="channel_popup" v-model="show">
      <!-- 弹出层ChannelEdit.vue -->
      <ChannelEdit
      :userList="userChannelList"
      :unCheckList="unCheckChannelList"
      @moreChannelEv="moreChannelFn"
      @deleteChannelEv="deleteChannelFn"
      @closePopupEv="closePopupFn"
      ref="editRef"
      v-model="channelId"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
// 使用组件
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, deleteChannelAPI } from '@/api'
import ArticleList from '@/views/Home/ArticleList'
import ChannelEdit from './ChannelEdit.vue'

// 目标1： 获取不同的频道，需要传入该频道的频道id（channelId）
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      channelId: 0, // tab导航-激活索引
      userChannelList: [], // 用户选择频道列表
      // articleList: []
      show: false,
      allChannelList: [],
      channelScrollObj: {} // 保存每个频道的滚动位置{推荐频道ID: 滚动距离}
    }
  },
  async created () {
    const res = await getUserChannelsAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    // this.changeChannelFn() //
    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },

  methods: {
    // 切换频道事件
    async  changeChannelFn () {
      // 文章列表
      // const res2 = await getAllArticleListAPI({
      //   channel_id: 0, // 默认请求第一个推荐频道数据
      //   timestamp: (new Date()).getTime() // 获得时间戳
      // })
      // console.log(res2)
      // this.articleList = res2.data.data.results

      // tab切换时 该组件内部会把切走的容器height设置为0
      // 切换回来一瞬间高度为0，设置滚动位置没有用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollObj[this.channelId]
      })
    },
    clickPlusFn () {
      this.show = true
    },
    // 点击一个添加后，要同步给后台改变数组，避免刷新后又恢复原样
    async moreChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      //
      //   const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      //   // console.log(newArr) // { id: 1, name: 'html' }
      //   newArr.forEach((obj, index) => {
      //     // delete 对象.属性 可以删除键值对 obj.name不需要作为参数
      //     delete obj.name
      //     obj.seq = index
      //   })
      //   const res = await updateChannelsAPI({
      //     channels: newArr
      //   })
      //   console.log(res)
      // }
      // 上面代码有问题，新增，名字都被删除了
      // 原因：所有数组的对象，都是同一个内存地址，影响到ChannelEdit.vue中对象
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      // console.log(newArr) // { id: 1, name: 'html' }
      // 目的：为了得到 发送请求的参数:
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 浅拷贝
        // delete 对象.属性 可以删除键值对 obj.name不需要作为参数
        delete newObj.name
        newObj.seq = index

        return newObj
      })

      const res3 = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res3)
    },
    async deleteChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => {
        // 推荐那俩字不能删
        if (obj.id === 0) {
          return
        }
        return channelObj.id === obj.id
      })
      this.userChannelList.splice(index, 1)

      //
      await deleteChannelAPI({
        channelId: channelObj.id
      })
    },
    // 点击x 关闭弹出层 并将编辑状态变回常态
    closePopupFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    // 点击搜索按钮 跳转到search页面 search页面是一级路由
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    // 定义一个方法 用来保存滚动高度， 滚动高度由HTML的scrollTop获得
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollObj[this.channelId] = document.documentElement.scrollTop
    }
  },
  // 添加更多的频道 要用所有的频道过滤掉已选频道 形成新数组newArr
  computed: {
    unCheckChannelList () {
      // 把所有频道数组挨个对象取出，取用户已选频道里找，如果找不到，就让filter收集到一个新数组中
      return this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return bigObj.id === smallObj.id
        })
        // 如果找到了一样的 返回false，filter就不收集该条obj数据
        // 如果没找到，则返回为true，filter就收集该条数据放到newArr里，然后该数据对象收集到新数组中
        // 最后return newArr给unCheckChannelList
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
    }
  },
  // 组件缓存后才会有的activated 和 deactivated钩子函数
  activated () {
    console.log(this.$route) // 保存滚动位置的变量在this.$route.meta.scrollTop
    window.addEventListener('scroll', this.scrollFn) // 保存滚动高度
    // window和document，监听网页滚动事件
    // html标签获取scrollTop,滚动的距离，和设置滚动位置
    // 立刻设置滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 前提：组件缓存
  // 每个页面都有自己独立的 路由规则对象
  // 当前组件切换走 （失去激活状态） 取消
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang='less'>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 45px;
}
/* // 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* // 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
